<template>
      <div class="bottom_nav" v-if="!route.meta.isShow">
    <RouterLink :to="{
      path: '/home',
      
    }"  active-class="active">
    <div class="imgs home home1" >

    </div></RouterLink>
    <RouterLink :to="{
      path: '/classify',
    }" active-class="active"> 
    <div class="imgs classify">

    </div>
    </RouterLink>
    <RouterLink :to="{
      path: '/shopping',
    }" active-class="active">
    <div class="imgs shopping">

    </div></RouterLink>
    <RouterLink :to="{
      path: '/My',
    }" active-class="active">
    <div class="imgs my">

    </div></RouterLink>
  </div>
</template>
<script setup lang='ts'>
import { useRoute,useRouter } from 'vue-router';
let router = useRouter()
let route = useRoute();
</script>
<style scoped>
.bottom_nav {
  width: 100%;
  height: 0.5rem;
  text-align: center;
  background-color: #f6f6f6;
  border-top: solid #e8e8e8 1px;
  position: fixed;
  left: 0;
  bottom: 0px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  background-color: #f6f6f6;
}

.bottom_nav a {
  flex: 1;
  text-decoration: none;
  margin: 0 auto;
}

.bottom_nav img {
  width: 0.48rem;
  height: 0.48rem;
}
.bottom_nav .imgs{
    width: 0.48rem;
    height: 0.48rem;
    margin: 0 auto; 
    background-size: 100% 100%;
} 
.home{
  background-image: url('../img/首页图标.png');
}
.classify{
  background-image: url('../img/分类.png');
}
.shopping{
  background-image: url('../img/购物车.png');
}
.my{
  background-image: url('../img/我的.png');
}

.bottom_nav a.active .home{
  background-image: url('../img/首页红色.png');
}
.bottom_nav a.active .classify{
  background-image: url('../img/分类红色.png');
}
.bottom_nav a.active .shopping{
  background-image: url('../img/购物车红.png');
}
.bottom_nav a.active .my{
  background-image: url('../img/我的考拉红色.png');
}
.bottom_nav a{
  background-size: 0.48rem 0.48rem;
  background-repeat: no-repeat;
  background-position: center;
}
</style>